<template>
    <div class="Seckill">
          <div class="Seckill-Header">
            <div class="Seckill-Left-Title">
              <div style="padding-left: 0.625rem">京东秒杀</div>
              <div class="Seckill-time">
                <div class="Seckill-timer">
                  <span style="padding-right: 0.125rem;color:#ff2727; ">{{SeckillTime}}</span>
                </div>
                <div class="Seckill-timerorder">
                  <div>00</div>:
                  <div>{{SeckillTimeMinute}}</div>:
                  <div>{{SeckillTimeSecond}}</div>
                </div>
              </div>

            </div>
            <div class="Seckill-Right">
              <div style="padding-right:0.3125rem; ">更多秒杀</div>
              <div class="icon"></div>
            </div>
          </div>

          <div class="Seckill-Content">
            <ul>
              <li v-for="(item,index) in SeckillImg" :key="index">
                <img :src="item.img" alt="">
                <span style="color:#f2270c; ">{{item.SeckillPrice}}</span>
                <br>
                <span style="text-decoration:line-through;color: #999">{{item.price}}</span>
              </li>
              <li >
                <div class="Seckill-Content-Last">
                  <i class="icon-Last"></i>
                  <span style="line-height: 1.2rem">查看全部</span>
                </div>

              </li>
            </ul>
          </div>
    </div>
</template>

<script>
export default {
  name: "Seckill",
  data:()=>({
    'SeckillTime':0,
    'SeckillTimeMinute':0,
    'SeckillTimeSecond':0,
    "SeckillImg":[]
  }),
  mounted(){
    let that=this;
    let url='http://localhost:5000';
    this.$http.get(url+'/data/Seckill.json')
        .then(function (response) {
          that.SeckillImg=response.data.Seckill.map(i=>({
            img :  url + i['img'],
           price:  i['price'],
    SeckillPrice:  i['SeckillPrice']
          }));

        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    that.time();
  },
  created() {
      let that=this;
      that.time();

    },
  methods:{
      time(){
          var that=this;
          var interval=setInterval(function timestampToTime(){
             let date=(new Date())-(new Date(2055/6/17));
              if(date>0){
                let time=date/1000;
                that.SeckillTime= parseInt((time % (60 * 60 * 24)) / 3600)+8<10?('0'+parseInt((time % (60 * 60 * 24)) / 3600)):parseInt((time % (60 * 60 * 24)) / 3600);
                that.SeckillTimeMinute=parseInt(((time % (60 * 60 * 24)) % 3600) / 60)<10?('0'+parseInt(((time % (60 * 60 * 24)) % 3600) / 60)):parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                that.SeckillTimeSecond = parseInt(((time % (60 * 60 * 24)) % 3600) % 60)<10?('0'+parseInt(((time % (60 * 60 * 24)) % 3600) % 60)):parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                that.SeckillTime= parseInt(that.SeckillTime)+8;
                that.SeckillTime= parseInt(that.SeckillTime) <10?('0'+parseInt(that.SeckillTime)):parseInt(that.SeckillTime);
              }else{
                that.SeckillTime="00";
                that.SeckillTimeMinute="00";
                that.SeckillTimeSecond="00";
                clearInterval(interval)
              }

          },100);

    },

  }
}
</script>

<style scoped>
  .Seckill{
    width: 22.1875rem;
    height: 8.625rem;
    background: #fff;
    margin: 0 auto;
    border-radius: 0.625rem;
    font-size:0.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .Seckill-Header{
     width: 100%;
    height: 2.125rem;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .Seckill-Left-Title{
    width: 12rem;
    height: 100%;
    display: flex;

    font-size: 0.875rem;
    align-items: center;
  }
  .Seckill-time{
    width:7.5rem;
    display: flex;
    justify-content: space-between;
  }
  .Seckill-timer{
    width: 3.125rem;
    padding-top: 2px;
    position: relative;
  }
  .Seckill-timer:after{
    width: 1.28rem;
    height: 1.0925rem;
    content: "";
    display: inline-block;
    background-image: url('//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;

  }
  .Seckill-timerorder{
    width: 3.5625rem;
    height: 1.125rem;
    padding-top: 0.125rem;
    display: flex;
    justify-content: space-around;
    color: #fa2c19;
    font-size: 1.1rem;
  }
  .Seckill-timerorder div{
    background-color: #fa2c19;
    border-radius: 0.3125rem;
    width: 0.9375rem;
    height: 1.125rem;
    font-size:0.75rem;
    color: white;
   display: flex;
    justify-content: center;
    align-items: center;
  }
  .Seckill-Right{
      width: 4.375rem;
      height: 1.1875rem;
    display: flex;
    color:#fa2c19 ;
    align-items: center;
    }
  .icon{
    width: 0.75rem;
    height: 0.75rem;
    background: url('//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/arrow_rt_2ccb8cd5.png') no-repeat;
    background-size: contain;

  }

  .Seckill-Content{
    width: 21.4375rem;
    height: 6.4375rem;
    overflow-x:scroll;
    scroll-behavior: smooth;
  }
  .Seckill-Content ul{
    display: flex;
    align-items: center;
  }
  .Seckill-Content ul li{
    width: 3.5725rem;
    height: 6.4375rem;
    padding: 0 0.125rem;
  }
  .Seckill-Content ul li img{
    width: 3.449375rem;
    height: 3.449375rem;
  }
  .Seckill-Content::-webkit-scrollbar{
    display: none;
  }
  .Seckill-Content-Last{
    width: 1.25rem;
    height: 6.25rem;
    background-color: #f5f5f5;
    color:#666 ;
    border-radius: 0.125rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

  }
  .icon-Last{
    display: block;
    width:0.75rem;
    height:0.75rem;
    background: url('//wq.360buyimg.com/fd/h5/wxsq_dev/m_jd_index/images/index/jd-sprites_c4019063.png') -6.6875rem -6.8125rem no-repeat;
    background-size:12.5rem 12.5rem;
  }
</style>